import {
    QuestionCircleOutlined,
    CommentOutlined,
    CustomerServiceOutlined,
} from "@ant-design/icons";
import { FloatButton } from "antd";

const FloatButtonView = () => {
    return (
        <>
            <h2>悬浮按钮</h2>
            <FloatButton
                icon={<QuestionCircleOutlined />}
                type='primary'
                style={{
                    insetInlineEnd: 34,
                }}
            />
            <FloatButton
                icon={<QuestionCircleOutlined />}
                type='default'
                tooltip='帮助'
                style={{
                    insetInlineEnd: 94,
                }}
            />
            <FloatButton.Group
                trigger='click'
                type='primary'
                style={{
                    insetBlockEnd: 324,
                    insetInlineEnd: 34,
                }}
            >
                <FloatButton badge={{ count: 2, color: "red" }} />
                <FloatButton icon={<CommentOutlined />} />
                <FloatButton icon={<CustomerServiceOutlined />} />
            </FloatButton.Group>
        </>
    );
};

export default FloatButtonView;
